<div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive"
    ng-if="!loading && !showConfig && !showNodes && isClusterEnabled && isClusterRunning && authorized">

    <!-- TODO - migrate to a React Component-->

    <!-- Overview card -->
    <div class="euiFlexItem">
        <div class="euiPanel euiPanel--paddingMedium">
            <span class="euiTitle euiTitle--small euiCard__title">Details&nbsp;
                <button ng-click="goConfiguration()"
                    class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall" type="button"><span
                        class="euiButtonEmpty__content"><i class="fa fa-fw fa-pie-chart"></i><span
                            class="euiButtonEmpty__text">View
                            Overview</span>
                    </span>
                </button>
            </span>
            <div class="euiSpacer euiSpacer--m"></div>
            <div layout="row" class="wz-padding-top-10">
                <span flex="25">IP</span>
                <span class="color-grey">{{configuration.nodes[0] || '-'}}</span>
            </div>
            <div layout="row" class="wz-padding-top-10">
                <span flex="25">Running</span>
                <span class="color-grey">{{ status || 'no' }}</span>
            </div>
            <div layout="row" class="wz-padding-top-10">
                <span flex="25">Version</span>
                <span class="color-grey">{{version}}</span>
            </div>
        </div>
    </div>
    <!-- End overview card -->

    <!-- Info card -->
    <div class="euiFlexItem">
        <div class="euiPanel euiPanel--paddingMedium">
            <span class="euiTitle euiTitle--small euiCard__title">Information</span>
            <div class="euiSpacer euiSpacer--m"></div>
            <!-- Nodes -->
            <div layout="row" class="wz-padding-top-10 cursor-pointer" ng-click="goNodes()">
                <span flex="25" class="wz-text-link" tooltip="Click to open the list of nodes"
                    tooltip-placement="left">Nodes</span>
                <span class="wz-text-link" tooltip="Click to open the list of nodes"
                    tooltip-placement="right">{{nodesCount}}</span>
            </div>
            <!-- Agents -->
            <div layout="row" class="wz-padding-top-10 cursor-pointer" ng-click="goAgents()">
                <span flex="25" class="wz-text-link" tooltip="Click to open the list of agents"
                    tooltip-placement="left">Agents</span>
                <span class="wz-text-link" tooltip="Click to open the list of agents"
                    tooltip-placement="right">{{agentsCount}}</span>
            </div>
        </div>
    </div>
    <!-- End info card -->
</div>